<template>
	<view class="user-overview">
		<view class="user-info">
			<image :src="user.avatar || defaultAvatar" class="avatar" mode="aspectFill" />
			<view class="user-details">
				<text class="nickname">{{ user.nickName || user.userName }}</text>
				<text class="member-level">{{ memberLevelText }}</text>
			</view>
			<view class="action-buttons">
				<view class="checkin-btn" @click="handleCheckIn">
					<text class="checkin-text">签到</text>
					<text class="checkin-icon">✓</text>
				</view>
				<!-- <view class="refresh-btn" @click="handleRefresh">
					<text class="refresh-icon">↻</text>
				</view> -->
			</view>
		</view>

		<view class="points-summary">
			<view class="points-item">
				<text class="points-value">{{ userAdditionalInfo.currentPoints || 0 }}</text>
				<text class="points-label">当前积分</text>
			</view>
			<view class="divider"></view>
			<view class="points-item">
				<text class="points-value">{{ userAdditionalInfo.totalPoints || 0 }}</text>
				<text class="points-label">总积分</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	interface Props {
		user : any
		userAdditionalInfo : any
	}

	interface Emits {
		(e : 'refresh') : void
		(e : 'checkin') : void
	}

	const props = defineProps<Props>()
	const emit = defineEmits<Emits>()

	const defaultAvatar = '/static/images/profile.jpg'

	// 会员等级文本
	const memberLevelText = computed(() => {
		const level = props.userAdditionalInfo?.memberLevel || 0
		const levelMap = {
			0: '普通会员',
			1: '青铜会员',
			2: '白银会员',
			3: '黄金会员',
			4: '钻石会员',
			5: 'VIP会员'
		}
		return levelMap[level] || '普通会员'
	})

	const handleRefresh = () => {
		emit('refresh')
		uni.showToast({
			title: '刷新中...',
			icon: 'loading',
			duration: 1000
		})
	}

	const handleCheckIn = () => {
		emit('checkin')
		uni.showToast({
			title: '签到中...',
			icon: 'loading',
			duration: 1000
		})
	}
</script>

<style lang="scss" scoped>
	.user-overview {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		color: white;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			border: 3rpx solid rgba(255, 255, 255, 0.3);
		}

		.user-details {
			flex: 1;

			.nickname {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.member-level {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}

		.action-buttons {
			display: flex;
			gap: 16rpx;
			align-items: center;
		}

		.checkin-btn {
			width: 120rpx;
			height: 60rpx;
			background: rgba(76, 175, 80, 0.8);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8rpx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
				background: rgba(76, 175, 80, 1);
			}

			.checkin-text {
				font-size: 24rpx;
				font-weight: bold;
				color: white;
			}

			.checkin-icon {
				font-size: 28rpx;
				font-weight: bold;
				color: white;
			}
		}

		.refresh-btn {
			width: 60rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
				background: rgba(255, 255, 255, 0.3);
			}

			.refresh-icon {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.points-summary {
		display: flex;
		align-items: center;

		.points-item {
			flex: 1;
			text-align: center;

			.points-value {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.points-label {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}

		.divider {
			width: 2rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.3);
			margin: 0 30rpx;
		}
	}
</style>